<template>
  <div class="container">
    <!-- 试题预览 -->
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="900px"
      @close="close"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <span v-if="onlist.questionType === '单选'">【题型】：单选题</span>
          <span v-else-if="onlist.questionType === '多选'">【题型】：多选题</span>
          <span v-else-if="onlist.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="onlist.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">【编号】：{{ onlist.enterpriseID }}</el-col>
        <el-col :span="6">

          <span v-if="onlist.difficulty === '简单'">【题型】：简单</span>
          <span v-else-if="onlist.difficulty === '一般'">【题型】：一般</span>
          <span v-else-if="onlist.difficulty === '1'">【题型】：简单</span>
          <span v-else-if="onlist.difficulty === '2'">【题型】：一般</span>
          <span v-else>【题型】：困难</span>
        </el-col>
        <el-col :span="6">【标签】：{{ onlist.tags }}</el-col>
        <el-col :span="6">【学科】：{{ onlist.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ onlist.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ onlist.direction }}</el-col>
      </el-row>
      <hr />
      <el-row>【题干】：</el-row>
      <div v-html="onlist.question" style="color: blue"></div>
      <div class="radio">
        <!-- 遮罩层 此弹窗是为了展示正确答案 防止用户修改答案 -->
        <div class="mask"></div>
        <p>{{onlist.questionType}}题 选项：（以下选中的选项为正确答案)</p >
        <div
          style="padding: 8px 0px"
          v-for="(item, index) in onlist.options"
          :key="index"
        >
          <el-radio
            v-model="radio[0]"
            :label="item.title"
            v-if="onlist.questionType === '单选'"
          ></el-radio>
          <el-checkbox v-model="radio" :label="item.title" v-else></el-checkbox>
        </div>
      </div>
      <hr />
      <div>
        【参考答案】: &nbsp;<el-button
          type="danger"
          size="small"
          @click="answerVideo"
          >视频答案预览</el-button
        >
      </div>
      <div class="video" v-if="videoShow">
        <video
          :src="videoUrl"
          autoplay="autoplay"
          controls
          width="400px"
          height="200px"
          type="video/mp4"
        ></video>
      </div>
      <hr />
      <div style="padding: 10px 0">
        【答案解析】:
        <div style="display: inline-block" v-html="onlist.answer"></div>
      </div>
      <hr />
      <div>
        【题目备注】: <span>{{ onlist.remarks }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="text-align:right">
          <el-button type="primary" @click="close">取消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: [],
      videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 接口视频地址有问题
      videoShow: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    },
    onlist: {
      type: Object,
      require: true
    }
  },
  methods: {
    async findRadio () {
      await this.onlist
      // console.log(this.onlist)
      if (this.onlist.options) {
        this.onlist.options.forEach((item) => {
          if (item.isRight === 1) {
            this.radio.push(item.title)
          }
        })
      } else {
        console.log('error')
      }
    },
    answerVideo () {
      this.videoShow = !this.videoShow
    },
    close () {
      this.$emit('close', false)
      // 关闭弹窗之后清空数据
      this.radio = []
      console.log(1)
      this.videoShow = false
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .el-col {
    padding: 10px 0;
  }
  .radio {
    position: relative;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
  }
  .video {
    padding: 10px 0;
  }
  ::v-deep .el-dialog__footer {
    text-align: right;
  }
}
</style>
